<div id="search-results" class="queryresults-wrapper ">
  <bar-loader :loading="state.loading"></bar-loader>
  <div class="queryresults-container">
    <template v-if="!state.loading">
      <ul v-if="hasLayers" class="queryresults" id="queryresults" style="position: relative">
        <li v-if="layerHasFeatures(layer) && layer.show" v-for="layer in state.layers">
          <div class="box box-primary">
            <div class="box-header with-border" data-widget="collapse">
              <div class="box-title query-layer-title">{{ layer.title }}
                <span class="query-layer-feature-count">({{layer.features.length}})</span>
                <span v-if="layer.hasgeometry && layer.features.length > 1" @click.stop="zoomToLayerFeaturesExtent(layer)" style="margin-left: 10px;" class="action-button skin-tooltip-right" data-placement="right" data-toggle="tooltip"
                       title="zoomToExtent">
                  <span class="action-button-icon" :class="g3wtemplate.getFontClass('marker')"></span>
                </span>
                <span>
                  <span title="CSV" class="action-button-icon action-button skin-tooltip-right"
                    data-placement="right" data-toggle="tooltip"
                    :class="g3wtemplate.getFontClass('csv')" @click.stop="saveLayerResult(layer)">
                  </span>
                </span>
              </div>
              <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="btn-collapser skin-color" :class="g3wtemplate.font['minus']"></i></button>
              </div>
            </div>
            <div class="box-body">
              <template v-if="hasFormStructure(layer)">
                <table class="table">
                  <thead>
                    <tr>
                      <th v-for="n in state.layersactions[layer.id]" :style="{ width:headerExpandActionCellWidth + '%' }"></th>
                      <th v-for="(attribute, index) in attributesSubset(layer.attributes)">{{attribute.label}}</th>
                      <th v-show="!!hasLayerOneFeature(layer)"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-if="feature.show" v-for="feature in layer.features">
                      <tr @click="toggleFeatureBoxAndZoom(layer,feature)" @mouseover="trigger('highlightgeometry',layer,feature)" @mouseout="trigger('clearHighlightGeometry')" class="featurebox-header" :class="[collapsedFeatureBox(layer,feature) && layer.features.length > 1? '' : 'featurebox-header-open']">
                        <td v-if="showAction({action: action, layer:layer, feature:feature})" @click.stop="trigger(action.id,layer,feature)" v-for="action in state.layersactions[layer.id]">
                          <span class="action-button  skin-tooltip-right" data-placement="right" data-toggle="tooltip" :title="action.hint">
                            <span :class="'action-button-icon ' + action.class"></span>
                          </span>
                        </td>
                        <td v-else></td>
                        <td style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden; vertical-align: middle" v-for="attribute in attributesSubset(layer.attributes)">
                          <span>{{feature.attributes[attribute.name]}}</span>
                        </td>
                        <td class="action-cell right">
                          <span v-if="!hasLayerOneFeature(layer)" class="fa link morelink skin-color" :class="[collapsedFeatureBox(layer,feature) ? g3wtemplate.font['plus'] : g3wtemplate.font['minus']]"></span>
                          <span v-else></span>
                        </td>
                      </tr>
                      <tr v-if="!collapsedFeatureBox(layer,feature) || hasOneLayerAndOneFeature(layer)" class="featurebox-body">
                        <td :colspan="attributesSubsetLength(layer.attributes)+(state.layersactions[layer.id].length + 1)">
                          <template v-for="item in getItemsFromStructure(layer)">
                            <table v-if="item.type === 'field'" class="fieldsoutofstructure">
                              <tbody>
                              <tr>
                                <td class="attr-label">{{ item.item.label }}</td>
                                <td class="attr-value" :attribute="item.item.name">
                                  <span v-if="is('simple',layer,item.item.name,feature.attributes[item.item.name])" v-html="feature.attributes[item.item.name]"></span>
                                  <g3w-image v-else-if="is('photo',layer,item.item.name,feature.attributes[item.item.name])"  :value="feature.attributes[item.item.name]"></g3w-image>
                                  <g3w-image v-else-if="checkField('image', item.item.label, layer.attributes)"  :value="item.item.value"></g3w-image>
                                  <g3w-link v-else-if="is('link',layer, item.item.name,feature.attributes[item.item.name])" :state="{value: feature.attributes[item.item.name]}"></g3w-link>
                                </td>
                              </tr>
                              </tbody>
                            </table>
                            <tabs v-else-if="item.type === 'tab'" :fields="getQueryFields(layer, feature)" :layerid="layer.id" :feature="feature" :tabs="item.item"></tabs>
                          </template>
                        </td>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </template>
              <table v-else class="table">
                <thead>
                  <tr>
                    <th v-for="n in state.layersactions[layer.id]" :style="{ width:headerExpandActionCellWidth + '%' }"></th>
                    <th v-for="(attribute, index) in attributesSubset(layer.attributes)">{{attribute.label}}</th>
                    <th v-if="!hasLayerOneFeature(layer)"></th>
                  </tr>
                </thead>
                <tbody>
                  <template v-if="feature.show" v-for="feature in layer.features">
                  <tr @click="toggleFeatureBoxAndZoom(layer,feature)" @mouseover="trigger('highlightgeometry',layer,feature)" @mouseout="trigger('clearHighlightGeometry')" class="featurebox-header" :class="[collapsedFeatureBox(layer,feature) && layer.features.length > 1 ? '' : 'featurebox-header-open']">
                    <td v-if="showAction({action:action, layer:layer, feature:feature})" @click.stop="trigger(action.id,layer,feature)" v-for="action in state.layersactions[layer.id]">
                      <span class="action-button skin-tooltip-right" data-placement="right" data-toggle="tooltip" :title="action.hint">
                        <span :class="'action-button-icon ' + action.class"></span>
                      </span>
                    </td>
                    <td v-else></td>
                    <td style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden; vertical-align: middle" v-for="attribute in attributesSubset(layer.attributes)">
                      <span>{{feature.attributes[attribute.name]}}</span>
                    </td>
                    <td class="action-cell right">
                      <span v-if="!hasLayerOneFeature(layer)"  class="fa link morelink skin-color" :class="[collapsedFeatureBox(layer,feature) ? g3wtemplate.font['plus'] : g3wtemplate.font['minus']]"></span>
                      <span v-else></span>
                    </td>
                  </tr>
                  <tr v-if="!collapsedFeatureBox(layer,feature) || hasOneLayerAndOneFeature(layer)" class="featurebox-body">
                    <td :colspan="attributesSubsetLength(layer.attributes)+(state.layersactions[layer.id].length + 1)">
                      <table class="feature_attributes">
                        <tr v-for="attribute in layer.attributes">
                          <td class="attr-label">{{ attribute.label }}</td>
                          <td class="attr-value" :attribute="attribute.name">
                            <span v-if="is('simple',layer,attribute.name,feature.attributes[attribute.name])" v-html="feature.attributes[attribute.name]"></span>
                            <g3w-image v-else-if="is('photo',layer,attribute.name,feature.attributes[attribute.name])"  :value="feature.attributes[attribute.name]"></g3w-image>
                            <g3w-image v-else-if="checkField('image', attribute.label, layer.attributes)"  :value="attribute.value"></g3w-image>
                            <g3w-link v-else-if="is('link',layer,attribute.name,feature.attributes[attribute.name])" :state="{value: feature.attributes[attribute.name]}"></g3w-link>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </template>
                </tbody>
              </table>
            </div>
          </div>
        </li>
        <li v-for="component in state.components">
          <component @showresults="showResults()" :is="component"></component>
        </li>
      </ul>
      <h4 v-if="!hasResults" style="font-weight: bold;" v-t="'info.no_results'"></h4>
    </template>
  </div>
</div>

